<template>
    <div class="navigation">
        <div class="header">
            <span v-if="isLogin == false">
                <a href="/login">你好,请登录</a>
                <a href="/register" class="reg">快速注册</a>&nbsp;&nbsp;|
            </span>
            <span v-else>
                <a href="/profile?activeIndex=1">{{ username }},欢迎您</a>
                <a href="" @click="logout">退出</a>&nbsp;&nbsp;|
            </span>
            <a href="/profile?activeIndex=3">我的订单</a>
        </div>
    </div>
</template>

<script setup>
import { useStore } from "vuex";
// import { reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const store = useStore()

const isLogin = store.state.user.isLogin;
const username = store.state.user.name;

const logout = () => {
    window.localStorage.setItem("token", "");
    store.commit("setIsLogin", false);
    router.push("/");
}

</script>

<style lang="less" scoped>
.navigation {
    background: linear-gradient(to right, #fec7fe, #99f8e0);
    // background: linear-gradient(to right, #baf4b3, #bcfefe, #f4d590);
    height: 30px;
    .header {
        width: var(--content-width);
        margin: 0, auto;
        text-align: right;
        line-height: 30px;
        a {
            color: var(--font-gray);
            &:hover {
                color: var(--font-red);
            }
            margin-left: 10px;
        }
        .reg {
            color: var(--font-red);
        }
    }
}
</style>